<template>
  <div class="base_wrap">
    <div class="pname">{{ infoData.name }}</div>
    <p class="desc">{{ infoData.desc }}</p>
    <div class="price">
      <span>￥{{ infoData.price }}</span> <del>￥{{ infoData.oldPrice }}</del>
    </div>
    <div class="tips">
      <div><span>促销：</span> 12月好物放送，App领券购买直降120元</div>
      <div class="address">
        地址
      </div>
      <div><span>服务：</span>· 无忧退货</div>
    </div>
    <div class="sku_list">
      <div class="sku_one" v-for="item in infoData.specs" :key="item.name">
        <span>{{ item.name }}：</span>
        <div class="sku_info">
          <div
            class="mylist"
            v-for="speItem in item.values"
            :key="speItem.name"
          >
            <img
              :class="{ ac: speItem.selected }"
              :src="speItem.picture"
              :alt="speItem.name"
              v-if="speItem.picture"
              @click="changeSel(item, speItem)"
            />
            <span
              :class="{ ac: speItem.selected }"
              @click="changeSel(item, speItem)"
              v-if="!speItem.picture"
              >{{ speItem.name }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="steper">
      <span>数量：</span>
      <div>
        <button>-</button>
        <input type="text" value="1" />
        <button>+</button>
      </div>
    </div>
    <div class="add_cart">
      加入购物车
    </div>
  </div>
</template>
<script>
import getPowerSet from '../../../utils/pow-set'
export default {
  props: ['infoData'],
  data () {
    pathMap: {
    }
  },
  created () {
    this.pathMap = this.getPathMap(this.infoData.skus)
    this.updateDisabledStatus(this.infoData.specs, this.pathMap)
  },
  methods: {
    getPathMap () {
      console.log(111)
      const star = '★'
      const pathMap = {}
      this.infoData.skus.forEach(sku => {
        // 1. 过滤出有库存有效的sku
        if (sku.inventory) {
          // 2. 得到sku属性值数组
          const specs = sku.specs.map(spec => spec.valueName)
          // 3. 得到sku属性值数组的子集
          const powerSet = getPowerSet(specs)
          // 4. 设置给路径字典对象
          powerSet.forEach(set => {
            const key = set.join(star)
            // 没有key设置一个数组，用于存放 skuid
            if (!pathMap[key]) pathMap[key] = []
            // 往数组追加 skuid
            pathMap[key].push(sku.id)
          })
        }
      })
      console.log(pathMap)
      return pathMap
    },
    getSelectedArr () {
      const arr = []
      this.infoData.specs.forEach(spec => {
        const obj = spec.values.find(val => val.selected)
        arr.push(obj ? obj.name : undefined)
      })
      console.log(arr)
      return arr
    },
    updateDisabledStatus () {
      this.infoData.specs.forEach((spec, index) => {
        // 先获取当前选中的规格集合
        const curr = this.getSelectedArr(this.infoData.specs)
        // 🔔 根据当前选中集合，模拟用户的下一次选中
        spec.values.forEach(val => {
          // 已经选中的，不用模拟
          if (val.selected) return
          // 模拟其他未选中的值，注意下标顺序要对应起来
          curr[index] = val.name
          // 过滤无效值，并最终得到key
          const key = curr.filter(v => v).join('★')
          // 根据 key 在字典从查找，最终设置禁用状态
          val.disabled = !this.pathMap[key]
        })
      })
    },
    changeSel (item, val) {
      // item --整个规格的一级叔祖
      // val --当前点击的规格

      if (val.selected) {
        //当前为选中状态  变为不选中
        val.selected = false
      } else {
        // 其他都为false
        item.values.forEach(it => {
          it.selected = false
        })
        // 当前点击的数据加selected为false
        val.selected = true
      }
      console.log(item, val)
      this.$forceUpdate()
      this.updateDisabledStatus(this.infoData.specs, this.pathMap)
    }
  }
}
</script>
<style lang="less">
.base_wrap {
  width: 660px;
  height: 600px;
  .pname {
    font-size: 20px;
  }
  .desc {
    color: #ccc;
    font-size: 14px;
    margin: 10px 0;
  }
  .price {
    font-size: 20px;
    span {
      color: red;
      margin-right: 15px;
    }
    del {
      color: #ccc;
    }
  }
  .tips {
    height: 150px;
    background: #e5e5e5;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
.sku_one {
  width: 600px;
  display: flex;
  align-items: center;
  margin-top: 15px;
  .sku_info {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      margin-left: 20px;
      border: 1px solid #e5e5e5;
    }
    span {
      padding: 5px 10px;
      border: 1px solid #e5e5e5;
      margin-left: 20px;
    }
  }
}
.steper {
  display: flex;
  margin-top: 20px;
  align-items: center;
  div {
    margin-left: 20px;
    display: flex;

    button {
      outline: none;
      width: 30px;
      height: 40px;
    }
    input {
      width: 50px;
      height: 36px;
      text-align: center;
    }
  }
}
.add_cart {
  width: 180px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #27bb9a;
  color: white;
  margin-top: 20px;
  cursor: pointer;
  margin-left: 20px;
}
.ac {
  border: 2px solid #27bb9a !important;
  box-sizing: border-box !important;
}
</style>
